import React, { Component } from 'react'
import {connect} from "react-redux"
export class Add extends Component {
    state={

       
            name:"",
            msg:"",
            data:"",
            ups:"",
            size:"",
            open:false
        
    }
    render() {
        let  ind = 0
        let datas = ["先生","女士"]
        let {name,msg,data,size,ups} = this.state
        return (
            <div className="wrapper">
                <header>
                    新增收货地址
                </header>
                <p className="name">
                    收货人 <input type="text" placeholder="姓名" value={name} onChange={(e)=>{this.setState({name:e.target.value})}}/>
                </p>
                <p className="name">
                    电话 <input type="text" placeholder="收货人手机号码" value={msg} onChange={(e)=>{this.setState({msg:e.target.value})}}/>
                </p>
                <div className="name">
                      {
                          datas.map((item,index)=>{
                                return <span key={index} onClick={()=>{

                                    this.setState({index:index
                                    },()=>{
                                        this.setState({ups:datas[ind]})
                                    })
                                }} className={this.state.index===index?"action":""}>{item} </span>
                          })
                      }
                </div>
                <p className="name">
                    所在地区 <input type="text" placeholder="请选择省市区接到" value={size} onChange={(e)=>{this.setState({size:e.target.value})}}/>
                </p>
                <p className="name">
                    详细地址 <input type="text" placeholder="请手动输入详细收货地址" value={data} onChange={(e)=>{this.setState({data:e.target.value})}}/>
                </p>

                <div className="set">
                    设为默认地址                         <input type="checkbox" onChange={(e)=>{this.setState({open:e.target.checked})}} />

                </div>
                <div className="btns">
                      <span onClick={()=>{this.props.addStop(this.state)}}>保存</span>
                </div>

            </div>
        )
    }
}

export default connect(
    (state)=>{
        return {

        }
    }
    ,(dispatch)=>{
        return {
            addStop(obj){
                dispatch({type:"addStop",obj})
            }
        }
    }
)(Add)
